<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="zuo">左</button>
     <button id="you">右</button>
     <button id="xia">下</button>
     <button id="shang">上</button>
		<div style="position: relative;">
	 
     <div id="animate" style="background-color: yellow; position: absolute; height: 100px; width: 100px;"></div>
    
	</div>
	
	<script src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
	  $("#zuo").click(function () {
      var left =  $("div").css('margin-left')
        left = left.substr(0, left.length - 2);
     var left1 = left-50
        $("div").css('margin-left',left1+'px');
    })
    $("#shang").click(function () {
        var shang =  $("div").css('margin-top')
      var shang = shang.substr(0, shang.length - 2);
        shang1 = shang-50
        $("div").css('margin-top',shang1+'px');
    })
    $("#you").click(function () {
        var you =  $("div").css('margin-left')
        you = you.substr(0, you.length - 2);
        you = +you
       var you1 = you+50
        $("div").css('margin-left',you1+'px');
    })
    $("#xia").click(function () {
        var xia =  $("div").css('margin-top')
        xia = xia.substr(0, xia.length - 2);
        xia = +xia
      var xia1 = xia+50
        $("div").css('margin-top',xia1+'px');
    })

	</script>
	</body>
</html>
